<template>
  <div class="profile-container">
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="profile-card">
          <div class="user-info">
            <el-avatar :size="100" icon="UserFilled"></el-avatar>
            <h2>{{ userStore.userInfo?.name }}</h2>
            <p class="user-role">{{ getRoleText }}</p>
            <p class="user-id">学号/工号：{{ userStore.userInfo?.username || '未设置' }}</p>
          </div>
          
          <el-divider />
          
          <div class="profile-menu">
            <el-menu
              default-active="basic"
              class="profile-menu-nav"
              @select="handleSelect"
            >
              <el-menu-item index="basic">
                <el-icon><User /></el-icon>
                <span>基本信息</span>
              </el-menu-item>
              <el-menu-item index="security">
                <el-icon><Lock /></el-icon>
                <span>账号安全</span>
              </el-menu-item>
              <el-menu-item index="notification">
                <el-icon><Bell /></el-icon>
                <span>消息通知</span>
              </el-menu-item>
            </el-menu>
          </div>
        </el-card>
      </el-col>
      
      <el-col :span="16">
        <el-card class="content-card">
          <div v-if="activeTab === 'basic'">
            <h3 class="section-title">基本信息</h3>
            <el-form 
              :model="basicForm"
              label-width="120px"
              class="profile-form"
            >
              <el-form-item label="姓名">
                <el-input v-model="basicForm.name" />
              </el-form-item>
              <el-form-item label="性别">
                <el-radio-group v-model="basicForm.gender">
                  <el-radio label="male">男</el-radio>
                  <el-radio label="female">女</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="邮箱">
                <el-input v-model="basicForm.email" />
              </el-form-item>
              <el-form-item label="电话">
                <el-input v-model="basicForm.phone" />
              </el-form-item>
              <el-form-item v-if="userStore.isStudent" label="院系">
                <el-input v-model="basicForm.department" />
              </el-form-item>
              <el-form-item v-if="userStore.isStudent" label="年级">
                <el-select v-model="basicForm.grade" placeholder="选择年级" style="width: 100%">
                  <el-option label="大一" value="freshman" />
                  <el-option label="大二" value="sophomore" />
                  <el-option label="大三" value="junior" />
                  <el-option label="大四" value="senior" />
                </el-select>
              </el-form-item>
              <el-form-item v-if="userStore.isTeacher" label="职称">
                <el-select v-model="basicForm.title" placeholder="选择职称" style="width: 100%">
                  <el-option label="助教" value="assistant" />
                  <el-option label="讲师" value="lecturer" />
                  <el-option label="副教授" value="associate" />
                  <el-option label="教授" value="professor" />
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="saveBasicInfo">保存</el-button>
                <el-button>重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          
          <div v-else-if="activeTab === 'security'">
            <h3 class="section-title">账号安全</h3>
            <el-form 
              :model="securityForm"
              label-width="120px"
              class="profile-form"
            >
              <el-form-item label="旧密码">
                <el-input v-model="securityForm.oldPassword" type="password" show-password />
              </el-form-item>
              <el-form-item label="新密码">
                <el-input v-model="securityForm.newPassword" type="password" show-password />
              </el-form-item>
              <el-form-item label="确认新密码">
                <el-input v-model="securityForm.confirmPassword" type="password" show-password />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="changePassword">修改密码</el-button>
                <el-button>重置</el-button>
              </el-form-item>
            </el-form>
          </div>
          
          <div v-else-if="activeTab === 'notification'">
            <h3 class="section-title">消息通知</h3>
            <el-form 
              :model="notificationForm"
              label-width="120px"
              class="profile-form"
            >
              <el-form-item label="系统通知">
                <el-switch v-model="notificationForm.systemNotification" />
              </el-form-item>
              <el-form-item label="课程通知">
                <el-switch v-model="notificationForm.courseNotification" />
              </el-form-item>
              <el-form-item label="活动通知">
                <el-switch v-model="notificationForm.activityNotification" />
              </el-form-item>
              <el-form-item label="邮件提醒">
                <el-switch v-model="notificationForm.emailReminder" />
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="saveNotificationSettings">保存</el-button>
                <el-button>重置</el-button>
              </el-form-item>
            </el-form>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { useUserStore } from '../stores/user'

const userStore = useUserStore()

// 当前激活的标签
const activeTab = ref('basic')

// 角色文本
const getRoleText = computed(() => {
  if (userStore.isAdmin) return '管理员'
  if (userStore.isTeacher) return '教师'
  return '学生'
})

// 基本信息表单
const basicForm = ref({
  name: userStore.userInfo?.name || '',
  gender: 'male',
  email: '',
  phone: '',
  department: '计算机科学与技术',
  grade: 'sophomore',
  title: 'lecturer'
})

// 安全设置表单
const securityForm = ref({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 消息通知表单
const notificationForm = ref({
  systemNotification: true,
  courseNotification: true,
  activityNotification: false,
  emailReminder: false
})

// 菜单选择
const handleSelect = (key) => {
  activeTab.value = key
}

// 保存基本信息
const saveBasicInfo = () => {
  // 模拟保存成功
  ElMessage.success('基本信息保存成功')
}

// 修改密码
const changePassword = () => {
  if (!securityForm.value.oldPassword) {
    ElMessage.warning('请输入旧密码')
    return
  }
  
  if (!securityForm.value.newPassword) {
    ElMessage.warning('请输入新密码')
    return
  }
  
  if (securityForm.value.newPassword !== securityForm.value.confirmPassword) {
    ElMessage.warning('两次输入的密码不一致')
    return
  }
  
  // 模拟修改成功
  ElMessage.success('密码修改成功')
  securityForm.value = {
    oldPassword: '',
    newPassword: '',
    confirmPassword: ''
  }
}

// 保存通知设置
const saveNotificationSettings = () => {
  // 模拟保存成功
  ElMessage.success('通知设置保存成功')
}
</script>

<style scoped>
.profile-container {
  padding: 0 10px;
}

.profile-card {
  height: 100%;
}

.content-card {
  height: 100%;
}

.user-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
}

.user-info h2 {
  margin: 10px 0 5px 0;
  font-size: 20px;
}

.user-role {
  margin: 0 0 5px 0;
  color: #409eff;
  font-size: 14px;
}

.user-id {
  margin: 0;
  color: #909399;
  font-size: 12px;
}

.profile-menu {
  margin-top: 20px;
}

.profile-menu-nav {
  border-right: none;
}

.section-title {
  font-size: 18px;
  margin: 0 0 20px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}

.profile-form {
  max-width: 500px;
}
</style> 